<template>
    <div id="interviewReply">

        <div class="borrowing-info">
            <!--借款人信息-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="借款人信息" name="1">
                    <ul class="borrowing-ul">
                        <li>
                            <span>订单编号：</span>
                            <span>{{interviewReply.loanNo}}</span>
                        </li>
                        <li>
                            <span>借款人：</span>
                            <span>{{interviewReply.realName}}</span>
                        </li>
                        <li>
                            <span>手机号：</span>
                            <span>{{interviewReply.phone}}</span>
                        </li>
                        <li>
                            <span>身份证号码：</span>
                            <span>{{interviewReply.idcard}}</span>
                        </li>
                        <li>
                            <span>性别：</span>
                            <span>{{interviewReply.sex}}</span>
                        </li>
                        <li>
                            <span>年龄：</span>
                            <span>{{interviewReply.age}}</span>
                        </li>
                        <li>
                            <span>户籍：</span>
                            <span>{{interviewReply.familyRegister}}</span>
                        </li>
                        <li>
                            <span>学历：</span>
                            <span>{{interviewReply.education}}</span>
                        </li>
                        <li>
                            <span>婚姻状况：</span>
                            <span>{{interviewReply.marryStatus}}</span>
                        </li>
                        <li>
                            <span>住房状况：</span>
                            <span>{{interviewReply.houseStatus}}</span>
                        </li>
                        <li>
                            <span>年收入：</span>
                            <span>{{interviewReply.annualIncome}}</span>
                        </li>
                        <li>
                            <span>目前工作单位：</span>
                            <span>{{interviewReply.workCompany}}</span>
                        </li>
                        <li>
                            <span>所属城市：</span>
                            <span>{{interviewReply.workCity}}</span>
                        </li>
                        <li>
                            <span>公司规模：</span>
                            <span>{{interviewReply.workCompanyPeople}}</span>
                        </li>
                        <li>
                            <span>工作年限：</span>
                            <span>{{interviewReply.workExperience}}</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--银行卡信息-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="银行卡信息" name="2">
                    <ul class="borrowing-ul">
                        <li>
                            <span>所属银行：</span>
                            <span>{{interviewReply.bank}}</span>
                        </li>
                        <li>
                            <span>银行帐号：</span>
                            <span>{{interviewReply.bankAccount}}</span>
                        </li>
                        <li>
                            <span>开户支行：</span>
                            <span>{{interviewReply.bankBranch}}</span>
                        </li>
                        <li>
                            <span>银行预留手机：</span>
                            <span>{{interviewReply.bankPhone}}</span>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>

            <!--借款详情-->
            <el-collapse class="borrrowing-conllapse" v-model="conllapseArrData">
                <el-collapse-item title="借款详情" name="3">
                    <el-table :data="tableData" border style="width: 100%">
                        <el-table-column class-name="el-table-column" align="center" label="序号" type="index" width="80"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" label="借款时间" prop="beginTime" width="160"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="借款金额" prop="loanAmount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="借款期限" prop="loanTime"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" label="利率" prop="interestRate"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="还款方式" prop="repayType"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="110" label="综合服务费"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="手续费" prop="feeAmount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="还款总额" prop="repayAmount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="已还金额" prop="repayedAmount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="已还期数" prop="repayedCount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="130" label="剩余待还总额" prop="lessAmount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="逾期总额" prop="overdueAmount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="逾期期数" prop="overdueCount"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="逾期本金"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="逾期利息"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="催收费"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="100" label="借款状态" prop="repayStatus"></el-table-column>
                        <el-table-column class-name="el-table-column" align="center" width="180" label="操作" fixed="right">
                            <template scope="scope">
                                <el-button size="small" type="primary" @click="listRepayDetails()">查看详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-collapse-item>
            </el-collapse>
        </div>

        <!--还款明细-->
        <el-dialog title="还款明细" :visible.sync="dialogPayDetails" class="dialogPayDetails">
            <p class="font"><span>待还本金：<i>{{RepayDetails.lessPrincipal}}</i></span><span> 待还利息：<i>{{RepayDetails.lessInterest}}</i></span></p>
            <el-table :data="RepayDetails.list" border>
                <el-table-column align="center" property="repayIndex" label="期数" ></el-table-column>
                <el-table-column align="center" property="repayBeginTime" label="还款时间" width="150"></el-table-column>
                <el-table-column align="center" property="payPrincipal" label="本金" width="120"></el-table-column>
                <el-table-column align="center" property="payInterest" label="利息" width="120"></el-table-column>
                <el-table-column align="center" property="payAmount" label="总金额" width="120"></el-table-column>
                <el-table-column align="center" property="overdueStatus" label="逾期状态" width="120"></el-table-column>
                <el-table-column align="center" property="overdueDay" label="逾期天数" width="120"></el-table-column>
                <el-table-column align="center" property="overdueInterest" label="逾期利息" width="120"></el-table-column>
                <el-table-column align="center" property="overdueCharging" label="催收费"></el-table-column>
            </el-table>
        </el-dialog>

    </div>
</template>

<script>
    import { userLoanInfo, listRepayProject, listRepayInfo } from "@/api/api";
    export default {
        name: "interviewReply",
        data () {
            return {
                conllapseArrData: ['1', '2', '3'],
                interviewReply: {},
                tableData: [],
                RepayDetails: {},
                dialogPayDetails: false
            };
        },
        mounted: function () {
            this.$nextTick(function () {
                this.loadData();
                this.listRepay();
            });
        },
        methods: {
            // 借款人详情;
            async loadData () {
                let _this = this;
                await userLoanInfo({
                    "loanNo": this.$route.query.loanNo
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.interviewReply = Data;
                    console.log(Data);
                });
            },
            // 借款详情列表
            async listRepay () {
                let _this = this;
                if (this.$route.query.userNo) {
                    await listRepayProject({
                        "userNo": this.$route.query.userNo,
                        "pageNum": 1,
                        "pageSize": 12
                    }).then((res) => {
                        let Data = JSON.parse(res.data.ciphertext);
                        _this.tableData = Data;
                        if (_this.tableData !== undefined) {
                            let arr = _this.tableData;
                            for (let i=0; i<arr.length; i++) {
                                let repayTypeArr = ["到期还款", "先息后本", "等额本息", "等额本金"];

                                // 借款时间
                                if (arr[i].beginTime) {
                                    arr[i].beginTime = this.formatTime(arr[i].beginTime);
                                }
                                // 还款方式
                                arr[i].repayType = repayTypeArr[arr[i].repayType];
                            };
                        }
                    });
                }
            },
            // 还款明细列表
            async listRepayDetails () {
                this.dialogPayDetails = true;
                let _this = this;
                await listRepayInfo({
                    "userNo": this.$route.query.userNo,
                    "loanNo": this.$route.query.loanNo,
                    "pageNum": 1,
                    "pageSize": 12
                }).then((res) => {
                    let Data = JSON.parse(res.data.ciphertext);
                    _this.RepayDetails = Data;
                    let arr = _this.RepayDetails.list;
                    for (let i=0; i<arr.length; i++) {
                        let repayStatusArr = ["未还款", "还款中", "已还款"];

                        // 还款时间
                        if (arr[i].repayBeginTime) {
                            arr[i].repayBeginTime = this.formatTime(arr[i].repayBeginTime);
                        }

                        // 借款状态
                        arr[i].repayStatus = repayStatusArr[arr[i].repayStatus];
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    #interviewReply{
        .borrowing-info{
            margin:20px;
            .el-collapse{
                margin-bottom:20px;
                .borrowing-ul{
                    font-size:14px;
                    li{
                        width: 25%;
                        float: left;
                        margin-bottom: 20px;
                        span:nth-of-type(1){
                            color: #999999;
                            margin-right: 10px;
                        }
                    }
                }
                .el-table {
                    .el-table-column{
                        .cell{
                        }
                    }
                }
            }
        }
        .dialogPayDetails{
            .font{
                margin-bottom:30px;
                span{
                    margin-right:40px;
                    i{
                        font-style: normal;
                    }
                }
            }
        }
    }
</style>
